<template>
  <div class="container">
    <div class="app-container">
      <!-- 显示数据 -->
      <el-table
        :data="tableData"
        border
        show-summary
        style="width: 100%"
      >
        <!-- 家庭光伏系统的太阳能板数量在4-12片之间，根据家庭的用电量和太阳能板的功率而定。 -->
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <!-- 电流大小与其功率和电压有关，一般在5A-10A之间 -->
        <el-table-column
          prop="amount2"
          sortable
          label="电流(A)"
        >
          <template v-slot="{ row }">
            <span :key="row.zip">{{ (Math.random() * 5 + 5).toFixed(1) }}</span>
          </template>
        </el-table-column>
        <!-- 电压大小也与其功率和电流有关，一般在12V-24V之间。 -->
        <el-table-column
          prop="amount1"
          sortable
          label="电压(V)"
        >
          <template v-slot="{ row }">
            <span :key="row.zip">{{ (Math.random() * 12 + 12).toFixed(1) }}</span>
          </template>
        </el-table-column>
        <!-- 太阳能板的温度会影响其发电效率，一般在25℃左右时效率最高 -->
        <el-table-column
          sortable
          label="温度(℃)"
        >
          <template v-slot="{ row }">
            <span :key="row.zip">{{ (Math.random() * 35 + 5).toFixed(1) }}</span>
          </template>
        </el-table-column>
        <!-- 太阳能板的发电量与其功率、电流、电压和日照时间等因素有关，
        一般在每天4-6小时的日照条件下，家庭光伏系统的发电量在3-15度之间。 -->
        <el-table-column
          prop="amount3"
          sortable
          label="发电量(度)"
        >
          <template v-slot="{ row }">
            <span :key="row.zip">{{ (Math.random() * 12 + 3).toFixed(1) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Energy',
  data() {
    return {
      tableData: [{
        id: '12987122',
        amount1: '9.6',
        amount2: '17.7',
        amount3: '11.3',
        zip: 1
      }, {
        id: '12987123',
        amount1: '6.0',
        amount2: '14.3',
        amount3: '8.5',
        zip: 2
      }, {
        id: '12987124',
        amount1: '6.6',
        amount2: '19.9',
        amount3: '4.8',
        zip: 3
      }, {
        id: '12987125',
        amount1: '9.5',
        amount2: '2.2',
        amount3: '3.2',
        zip: 4
      }, {
        id: '12987126',
        amount1: '5.9',
        amount2: '4.1',
        amount3: '8.9',
        zip: 5
      }],
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: '今年的增长'
    }
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>
<style lang="scss">
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>
